<template>
	<view>
		<view class="head-box">
			<!-- 第一张图：层级更高，盖在上方 -->
			<image src="@/static/img/indexHeadM.png" mode="widthFix" class="head-img top-img"></image>
			<!-- 第二张图：层级更低，在下方 -->
			<image :src="localImgUrl" mode="widthFix" class="head-img bottom-img"></image>


			<navbarVue icon="home" title="访客系统"></navbarVue>

			<view class="head-title-box">
				<view class="">
					<view class="title">欢迎使用！</view>
					<view class="text-item">
						<view class="">中船(重庆)装备技术有限公司</view>
						<view class="codeNum" @click="hanldeCopy" v-if="userType === '2'">
							<div>我的邀请码：</div>
							<div>{{inviteCode}}</div>
							<div class="codeNum-icon">
								<image src="/static/icon/icon-17.png" mode=""></image>
							</div>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import navbarVue from '@/components/navbar/navbar.vue';
	import {
		ref,
		watch
	} from 'vue'
	import {
		useStore
	} from 'vuex'

	const store = useStore()

	const props = defineProps({
		navBgImg: {
			type: String,
			default: ''
		}
	})

	//1访客 2被访客 3保安
	const userType = ref('1')
	const localImgUrl = ref('/static/img/indexHead.png')
	const inviteCode = ref('')


	watch(
		[() => store.getters.getRoles, () => store.getters.getUserInfo, () => props.navBgImg],
		([newRoles, newUserInfo, newNavBgImg]) => {
			// 处理图片地址
			localImgUrl.value = newNavBgImg;
			// 处理用户身份
			if (Array.isArray(newRoles) && newRoles.length > 0) {
				userType.value = newRoles[0];
			}
			if (newUserInfo) {
				inviteCode.value = newUserInfo.invitationCode;
			}


		}, {
			deep: true,
			immediate: true
		}
	);


	const hanldeCopy = () => {
		uni.setClipboardData({
			data: inviteCode.value,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			},
			fail: function(err) {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}





</script>

<style lang="scss">
	.head-box {
		width: 100vw;
		height: 600rpx;
		position: relative;
		overflow: hidden;
	}

	.head-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.top-img {
		z-index: 2;
	}

	.bottom-img {
		z-index: 1;
	}

	.head-item {
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		box-sizing: border-box;

		.house {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.house-text {
			color: var(--color-ff);
			font-size: var(--font-16);
		}
	}

	.head-title-box {
		position: absolute;
		bottom: 15%;
		left: 0;
		right: 0;
		z-index: 3;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.title {
			font-size: 28px;
			color: var(--color-ff);
			font-weight: 800;
			margin-left: 24rpx;

		}

		.text-item {
			margin-left: 24rpx;
			margin-top: 16rpx;
			font-size: var(--font-18);
			color: var(--color-ff);
		}

		.codeNum {
			display: flex;
			margin-top: 4px;
			font-size: 14px;

			.codeNum-icon {
				width: 20px;
				height: 20px;
				margin-left: 6px;

				image {
					width: 100%;
					height: 100%;
				}
			}


		}

	}
</style>